<template>
    <up-popup class="settingPopup" :safeAreaInsetTop="true" mode="top" :show="show" :overlay="true" :round="10" @close="close" @open="openCallback">
        <up-navbar bgColor="#7099B4" :safeAreaInsetTop="true" >
          <template #left>
            <up-icon size="24" name="setting" style="margin-right: 5px;" color="#fff"></up-icon>
            <up-text text="設定圖層" color="#fff"></up-text>
          </template>

          <template #right>
              <up-icon size="28" :name="closePng" color="#fff"  @click="close"></up-icon>
          </template>
        </up-navbar>
      <view class="content">
        <bangs/>

        <up-cell-group :border="false">
          <up-cell >
            <template #title>
              <view style="display: flex;align-items: center;">
                <template v-if="!userStore.user_id">
                  <up-avatar text="?"  @click="login"></up-avatar>
                  <up-text text="請登入" margin="0 0 0 10px" size="18" color="rgb(138 138 138)"  @click="login"></up-text>
                </template>
                <template v-else>
                  <up-avatar :text="userStore.avatar ? userStore.avatar : (userStore.name).charAt(0).toUpperCase()" randomBgColor></up-avatar>
                  <up-text :text="userStore.name" margin="0 0 0 10px" size="18" color="rgb(138 138 138)"></up-text>
                </template>
              </view>
            </template>
            <template #value>
              <up-icon v-if="!userStore.user_id" :name="loginPng" size="23" @click="login"></up-icon>
              <up-icon v-else :name="exitPng" size="23" @click="logOut"></up-icon>
            </template>
          </up-cell>

          <up-cell title="地段及政府撥地">
            <template #value>
              <up-switch v-model="mapStoreFun.lotgla" @change="lotglaChange"></up-switch>
            </template>
          </up-cell>
          <up-cell title="大地測量站"  >
            <template #value>
              <up-switch v-model="mapStoreFun.geodetic" @change="geodeticChange"></up-switch>
            </template>
          </up-cell>
      </up-cell-group>
        <up-gap height="30" bgColor="#ffffff00"></up-gap>
      </view>
  </up-popup>
</template>

<script setup  lang="ts">
import { ref,watch } from 'vue';
import closePng from '@/static/images/close.png'
import exitPng from '@/static/images/exit.png'
import loginPng from '@/static/images/login.png'
import bangs from '@/pages/common/head/bangs.vue'
import hk1980 from '@/static/icon/hk1980.png'
import { mapStore ,useUserStore} from '@/stores'
import { HKMAPtransform } from '@/api/system/map'

const mapStoreFun = mapStore();
const userStore = useUserStore();

// 创建响应式数据
const show = ref(false);

const emit = defineEmits<{
  (e: 'click', data: any): void
}>()

// 定义方法
function open() {
  mapStoreFun.SUM_MAPTYPE(1)
  show.value = true
}

function lotglaChange(e:any) {
  mapStoreFun.lotgla = e
  mapStoreFun.SET_LOTGLA(e)
}

function geodeticChange(e:any) {
  mapStoreFun.geodetic = e
  mapStoreFun.SET_GEODETIC(e)
}

function openCallback() {
}

function close() {
  mapStoreFun.SUM_MAPTYPE(-1);
  show.value = false;
}

function login() {
  uni.reLaunch({ url: '/pages/login' })
}

function logOut() {
  userStore.SET_TOKEN('')
  userStore.SET_AVATAR('')
  userStore.SET_NAME('')
  userStore.SET_USERID('')
  userStore.LogOut()
  uni.showToast({
    title: '退出成功',
    icon: 'success',
    duration: 2000
  })
}

defineExpose({
  open,
  close
});

</script>

<style scoped>
.settingPopup .content {
    padding: 20rpx;
    background-color: #fff;
    border-radius: 0px;
    /* height: 50vh; */
  }
</style>

